﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画3</title>
<style type="text/css">
<!--
img {
	border: none;

}
.box {
    display: inline;
    float: left;
    height: 417px;
    margin-left: 3px;
    overflow: hidden;
    position: relative;
    top: 2px;
    width: 765px;
}
.box .brick {
    overflow: hidden;
    position: absolute;
}
.box .mask {
    background: none repeat scroll 0 0 #000000;
    display: none;
    left: 0;
    opacity: 0.3;
	filter:alpha(opacity=30);
    overflow: hidden;
    position: absolute;
    top: 0;
}
-->
</style>
//2019-3-24
<script type='text/javascript' src="jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
        $(".brick").hover(function(){
            if(!$(this).find(".mask").is(":animated"))
                {
                $(this).find(".mask").fadeIn();
                }
            },function(){
                $(this).find(".mask").fadeOut();
            })
        })

</script>
</head>

<body>
<div class="box">
<a  style="width:382px;height:278px;top:139px;left:382px;" href="# " class="brick">
<img src="img/1.jpg" >
<div style="width: 382px; height: 278px; display: none;" class="mask"></div></a>

<a  style="width:191px;height:139px;top:0px;left:573px;" href="#" class="brick">
<img src="img/5.jpg" >
<div style="width: 191px; height: 139px; display: none;" class="mask"></div></a>

<a  style="width:191px;height:139px;top:0px;left:382px;" href="#" class="brick">
<img src="img/2.jpg" ><div style="width: 191px; height: 139px; display: none;" class="mask"></div></a>

<a  style="width:191px;height:139px;top:278px;left:191px;" href="#" class="brick">
<img src="img/6.jpg"><div style="width: 191px; height: 139px; display: none;" class="mask"></div></a>
<a  style="width:191px;height:139px;top:278px;left:0px;" href="#" class="brick">
<img src="img/7.jpg"><div style="width: 191px; height: 139px; display: none;" class="mask"></div></a>

<a  style="width:382px;height:278px;top:0px;left:0px;" href="#" class="brick">
<img src="img/9.jpg"><div style="width: 382px; height: 278px; display: none;" class="mask"></div></a>

</div>
</body>
</html>
